<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-model="message">
    <p>{{message}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
/*
v-model指令：表单输入元素或组件上创建双向绑定。
期望的绑定值类型：根据表单输入元素或组件输出的值而变化
仅限：
    <input>
    <select>
    <textarea>
    components
修饰符：
    .lazy - 监听 change 事件而不是 input
    .number - 将输入的合法字符串转为数字
    .trim - 移除输入内容两端空格
*/

/*
* 在前端处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦：
*     <input  :value="text" @input="event => text = event.target.value">
*
*v-model 指令帮我们简化了这一步骤：
*     <input v-model="text">
* */
    const app = Vue.createApp({
        data() {
            return {
                message: "helloVue3"
            }
        }
    })
    app.mount("#app")
</script>
</body>
</html>
